<script setup name="ProductionPannel2">
import productionBoard9 from "@/views/visual/modules/productionBoard9.vue";
import productionBoard10 from "@/views/visual/modules/productionBoard10.vue";
import productionBoard11 from "@/views/visual/modules/productionBoard11.vue";

import productionBoard13 from "@/views/visual/modules/productionBoard13.vue";
import productionBoard14 from "@/views/visual/modules/productionBoard14.vue";
import productionBoard15 from "@/views/visual/modules/productionBoard15.vue";
import moment from "moment";

const updateTime = ref("");
const timer = ref();
const key = ref(0);

const time = ref(300);

// 自动更新时间五分钟
const updateData = () => {
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--;
      const duration = moment.duration(time.value * 1000); // 转换为毫秒

      const minutes = duration.asMinutes(); // 总分钟数（包含小数部分）
      const wholeMinutes = Math.floor(minutes); // 取整得到分钟数
      const remainingSeconds = Math.round((minutes - wholeMinutes) * 60); // 计算剩余的秒数
      updateTime.value = `${wholeMinutes}分${remainingSeconds}秒`;
    } else {
      time.value = 300;
      key.value++;
    }
  }, 1000);
};

onMounted(updateData);
onUnmounted(() => {
  timer.value >= 0 && clearInterval(timer.value);
});
</script>

<template>
  <div class="ps_board">
    <div>
      <ps-header :showDecoration5="false" :updateTime="updateTime" />
    </div>

    <div class="productionPannel2-content">
      <div class="ps_h_50 content-main">
        <div class="left">
          <div class="ps_h_50 left-item">
            <productionBoard9 :key="key"></productionBoard9>
          </div>
          <div class="ps_h_50 left-item">
            <productionBoard10 :key="key"></productionBoard10>
          </div>
        </div>
        <div class="center">
          <productionBoard11 :key="key"></productionBoard11>
        </div>
        <div class="right">
          <div class="ps_h_50 right-item">
            <productionBoard15 :key="key"></productionBoard15>
          </div>
          <div class="ps_h_50 right-item">
            <productionBoard13 :key="key"></productionBoard13>
          </div>
        </div>
      </div>
      <div class="ps_h_50">
        <productionBoard14 :key="key"></productionBoard14>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.productionPannel2 {
  &-content {
    height: calc(100% - 60px);

    .content-main {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .center {
        width: 50%;
      }

      .left,
      .right {
        width: 24%;
      }
      .left-item,
      .right-item {
        width: 100%;

        &:first-child {
          padding-bottom: 10px;
        }
      }
    }
  }
}
</style>
